<template>
	<!-- 这个其实是店铺管理页面 -->
	<view class="content">
		<!-- 申请中 -->
		<view class="nav" v-if="statu===0">
			<view class="num">
				<image src="../../static/one.png" class="xvhao"></image>
				<view class="text">开店申请</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/two1.png" class="xvhao"></image>
				<view class="text">平台审核</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/three1.png" class="xvhao"></image>
				<view class="text">开始营业</view>
			</view>
		</view>
		<!-- 审核中 -->
		<view class="nav" v-if="statu===1">
			<view class="num">
				<image src="../../static/finish.png" class="xvhao"></image>
				<view class="text">开店申请</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/two.png" class="xvhao"></image>
				<view class="text">平台审核</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/three1.png" class="xvhao"></image>
				<view class="text">开始营业</view>
			</view>
		</view>
		<!-- 审核完毕 -->
		<view class="nav" v-if="statu===2">
			<view class="num">
				<image src="../../static/finish.png" class="xvhao"></image>
				<view class="text">开店申请</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/finish.png" class="xvhao"></image>
				<view class="text">平台审核</view>
			</view>
			<image src="../../static/xian.png" class="xian"></image>
			<view class="num">
				<image src="../../static/three.png" class="xvhao"></image>
				<view class="text">开始营业</view>
			</view>
		</view>
		
		
		
		<!-- 详细申请内容 -->
		<!-- 未申请 -->
		<view class="box1" v-if="statu===0">
			<view class="items">
				<view class="name" @click="toEdit('name', form.name, 30, '请输入店铺名称')">
					<view class="x">*</view>
					<view class="title">店铺名称</view>
					<view class="detail">{{form.name}}</view>
					<image src="../../static/you.png" class="icon-you"></image>
				</view>
				<view class="name" @click="toChooseAddress">
					<view class="x">*</view>
					<view class="title">店铺地址</view>
					<view class="detail">{{address || ''}}</view>
					<image src="../../static/you.png" class="icon-you"></image>
				</view>
				<view class="name" @click="toEdit('address2', form.address2, 50, '请输入店铺详细地址')">
					<view class="x">*</view>
					<view class="title">详细地址</view>
					<view class="detail">{{form.address2}}</view>
					<image src="../../static/you.png" class="icon-you"></image>
				</view>
				<view class="name" @click="toEdit('number', form.number, 20, '请输入店铺电话')">
					<view class="x">*</view>
					<view class="title">店铺电话</view>
					<view class="detail">{{form.number}}</view>
				<image src="../../static/you.png" class="icon-you"></image>
				</view>
				<view class="name">
					<view class="x">*</view>
					<text class="label">是否支持上门取送</text>
					<switch :checked="form.multiSpec" @change="form.multiSpec = $event.detail.value" class="detail"/>
					<text class="spec-txt">{{form.multiSpec ? '支持' : '不支持'}}</text>
				</view>
				<view class="name-jf">
					<view style="display: flex;">
						<view class="x">*</view>
						<text class="label">积分兑换要求</text>
					</view>
					
				    <view class="detail-jf">
				      1 积分 =<input class="rate-input" type="digit" v-model="rate" />元
				    </view>
				</view>
				<view class="name" v-if="form.multiSpec">
					<view class="x" style="color:white">*</view>
					<text class="label">配送费用（元）</text>
					<input
					    v-model="form.deliveryFee"
					    type="digit"
					    placeholder="请输入配送费用"
					    class="detail"
					  />
				</view>
				
				<view class="picture">
					<view><span style="color:red;">*</span>店铺图片</view>
					<!-- 未上传店铺外景 -->
					<view class="box" @click="chooseImg1" v-if="!waijing">
						<image src="../../static/camera.png" class="icon-camera"></image>
						<text>上传店铺外景图</text>
					</view>
					<!-- 上传了店铺外景 -->
					<image v-if="waijing" :src="waijing" mode="aspectFill" class="box" @click="chooseImg1"></image>
				</view>
				<view class="picture">
					<view><span style="color:red;">*</span>营业执照</view>
					<!-- 未上传营业执照 -->
					<view class="box" @click="chooseImg2" v-if="!zhizhao">
						<image src="../../static/camera.png" class="icon-camera"></image>
						<text>上传营业执照</text>
					</view>
					<!-- 上传了营业执照 -->
					<image v-if="zhizhao" :src="zhizhao" mode="aspectFill" class="box" @click="chooseImg2"></image>
				</view>
			</view>
			<view class="submit" @click="submit">提交审核</view>
		</view>
		<!-- 审核中 -->
		<view class="box1" v-if="statu===1&&statu2===0">
			<view class="items1">
				您的申请已提交，管理员审核中，请耐心等待
			</view>
			<view class="submit" @click="cancel">取消审核</view>
		</view>
		<!-- 审核通过 -->
		<!-- <view class="box1" v-if="statu===1&&statu2===1"> -->
		<view class="box1" v-if="statu===2">
			<view class="items1">
				恭喜！审核已通过！
			</view>
			<view style="color:blue;margin-top: 20rpx;" @click="modify">
				修改
			</view>
			<view class="submit" @click="enter">进入主页</view>
		</view>
		<!-- 审核未通过 -->
		<view class="box1" v-if="statu===1&&statu2===2">
			<view class="items2">
				<image src="../../static/tip.png" class="icon-tip"></image>
				<view>抱歉，您的申请未通过，请根据提示进行修改后再次提交。</view>
				<!-- <view>如有疑问，可联系电话：1234567890</view> -->
				<view style="margin-top: 100rpx;">修改意见：</view>
				<view>{{advise || ''}}</view>
				<!-- <view>2.XXXXXXXXsku不回家额的UI我的金额的卡卡卡阿卡家具娃娃急急急i1112</view> -->
			</view>
			<view class="submit" @click="modify">修改申请</view>
		</view>
		
		
	</view>
</template>
<script setup>
	import{ref,onMounted} from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import{applyShop,fetchStatus} from '@/api/shop.js'
	// 申请状态
	const statu = ref(0);
	//修改意见
	const advise =  ref('')
	// 审核状态
	const statu2 = ref(0);
	const address = ref('')
	//积分兑换比例
	const rate = ref('')
	// 经纬度
	const la = ref(0)
	const lo = ref(0)
	// 提交按钮
	// 提交按钮
	const submit = async() => {
	  /* 1. 文本类必填 */
	  if (!form.value.name)            return toast('请填写店铺名称');
	  // if (!address.value)              return toast('请选择店铺地址');
	  if (!form.value.address2)        return toast('请填写详细地址');
	  if (!form.value.number)          return toast('请填写店铺电话');
	  if (!rate.value || rate.value <= 0) return toast('请输入正确的积分兑换比例');
	
	//   /* 2. 图片类必填 */
	//   if (!waijing.value)  return toast('请上传店铺外景图');
	//   if (!zhizhao.value)  return toast('请上传营业执照');
	
	  /* 3. 配送费（若支持配送） */
	  if (form.value.multiSpec && !form.value.deliveryFee) {
	    return toast('请输入配送费用');
	  }
	
	  /* 4. 全部通过 → 进入审核 */
	  await applyShop({
		  shopId:form.value.id || undefined,
		  shopName:form.value.name,
		  // shopAddress:address.value,
		  
		  detailAddress:form.value.address2,
		   
		  shopPhone:Number(form.value.number),
		   
		  supportDelivery:Boolean(form.value.multiSpec),
		  shopImage:'aaa',
		  licenseImage:'sss',
		  deliveryFee:Number(form.value.deliveryFee),
		    
		 pointExchangeRate: Number(rate.value),
		 
		  // latitude:Number(la.value),
		  // longitude:Number(lo.value),
		  latitude:1,
		  longitude:2,
	  })
	  statu.value = 1;
	  statu2.value = 0
	  console.log(3,form.multiSpec)
	  uni.showToast({ title: '提交成功，请等待审核', icon: 'success' });
	};
	
	/* 轻量提示封装 */
	function toast(title) {
	  uni.showToast({ title, icon: 'none' });
	}
	const waijing=ref('')
	const zhizhao=ref('')
	const form = ref({})

	// 取消审核按钮
	const cancel = () => {
		console.log('取消了审核提交');
		statu.value=0;
		uni.showToast({
		  title: '已取消审核',
		  icon: 'none',   // success | loading | none
		  duration: 1000     // ms
		})
	}
	// 进入商城按钮
	const enter = () => {
		console.log('点击了进入主页按钮');
		uni.switchTab({ url: '/pages/index/index' })
		statu.value=2
	}
	// 修改申请按钮
	const modify = async() => {
		
		const res = await fetchStatus()
		
		form.value.id  = res.data.shopId
		form.value.name=res.data.shopName
		 address.value=res.data.shopAddress
		 form.value.address2= res.data.detailAddress
		  
		 form.value.number = res.data.shopPhone
		 form.multiSpec= res.data.supportDelivery
		 waijing.value = res.data.shopImage
		 zhizhao.value = res.data.licenseImage
		 form.value.deliveryFee = res.data.deliveryFee
		   
		rate.value= res.data.pointExchangeRate
		
		 la.value = res.data.latitude
		 lo.value = res.data.longitude
		statu.value=0;
	}
	//店铺地址
	const toChooseAddress = () => {
	  uni.chooseLocation({
	    success(res) {
	      address.value = res.address || res.name
		  console.log('纬度',res.latitude)
		  la.value = res.latitude
		  console.log('经度',res.longitude)
		  l0.value = res.longitude
	    },
	    fail(err) {
	      // 用户拒绝定位 / 没开权限
	      if (err.errMsg.includes('auth deny')) {
	        uni.showModal({
	          title: '提示',
	          content: '需要您授权位置信息',
	          success: () => uni.openSetting()
	        })
	      }
	    }
	  })
	}
	// 上传店铺外景
	const chooseImg1 = () =>
	  uni.chooseImage({
	    count: 1,                       // 1 张
	    sizeType: ['compressed'],       // 压缩图
	    sourceType: ['album', 'camera'],
	    success: (res) => {
	      waijing.value = res.tempFilePaths[0]   // 单张
	    }
	  })
	  const chooseImg2 = () =>
	    uni.chooseImage({
	      count: 1,                       // 1 张
	      sizeType: ['compressed'],       // 压缩图
	      sourceType: ['album', 'camera'],
	      success: (res) => {
	        // 把临时路径写进变量
	        zhizhao.value = res.tempFilePaths[0]   // 单张
	      }
	    })
		// 点击任意字段 → 跳转输入页
		const toEdit = (field, value, maxLen = 50, placeholder = '') => {
		  uni.navigateTo({
		    url: `/pages/order/ed/ed?field=${field}&value=${value}&maxLen=${maxLen}&placeholder=${placeholder}`
		  })
		}
		const fetchS = async()=>{
			 const res = await fetchStatus()
			 console.log('审核状态：',res)
			 if (res.data.applyStatus ==='待审核'){
				 statu.value =  1
				 return
			 }
			 if (res.data.applyStatus ==='审核通过'){
			 				 statu.value = 2
							 return
			 }
			 if (res.data.applyStatus ==='审核驳回'){
			 				 statu.value = 1
							 statu2.value=2
							 advise.value = res.data.remark
			 				return
			 }
			 
		}
		
		// 监听输入页返回
		onShow(() => {
			
		  uni.$off('input:confirm')   // 防止重复监听
		  uni.$on('input:confirm', (e) => {
		    // 动态修改 form 对应字段
		    form.value[e.field] = e.value
		  })
		  
		})
		const a = ref(1)
		const b = ref(10)
		const c = ref(1)
		onMounted(async() => {
			fetchS()
		})
	
</script>
<style>
	.content{
		width:100%;
		height:100vh;
		display:flex;
		flex-direction: column;
		background-color: #f5f5f5;
		align-items: center;
	}
		
	.nav{
		height:200rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width:95%;
	}
	.num{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width:150rpx;
		height:110rpx;
	}
	.xvhao{
		width:50rpx;
		height:50rpx;
	}
	.xian{
		flex:1;
		color:#d81e06;
		height:20rpx;
	}
	.box1{
		width:95%;
		flex:1;
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.items{
		width:100%;
		background-color: white;
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	/* 审核已提交/审核已通过 */
	.items1{
		width:auto;
		margin-top: 45%;
	}
	/* 未通过审核 */
	.items2{
		width:80%;
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
	}
	.icon-tip{
		width:80rpx;
		height:80rpx;
		margin-left: 46%;
		margin-bottom: 30rpx;
	}
	.submit{
		height:80rpx;
		width:90%;
		background-color: #f5232e;
		border-radius: 100rpx;
		position: absolute;
		bottom:40rpx;
		color:white;
		text-align: center;
		line-height: 80rpx;
	}
	.name{
		display: flex;
		align-items: center;
		width:95%;
		border-bottom: #f5f5f5 solid 1rpx;
		padding:20rpx 0;
		
	}
	.name-jf{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width:95%;
		border-bottom: #f5f5f5 solid 1rpx;
		padding:20rpx 0;
	}
	/* .uploaded-img{
		width:100%;
		height:100%;
		border-redius:50rpx;
	} */
	.x{
		color:red;
	}
	.detail{
		flex: 1;
		text-align: end;
		color:gray;
	}
	.detail-jf{
		display:flex;
	}
	.icon-you{
		width:50rpx;
		height:50rpx;
	}
	.box{
		height:200rpx;
		width:200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		font-size: small;
	}
	.picture{
		display: flex;
		width:95%;
		justify-content: space-between;
		align-items: center;
		border-bottom: #f5f5f5 solid 1rpx;
		padding: 20rpx 0;
		
		
	}
	.icon-camera{
		width:100rpx;
		height:100rpx;
	}
	.rate-input{
		width:80rpx;
		border:solid 1rpx #eee;
	}
	
	
</style>